<template>
    <div class="row">
        <AppPageContent :opApi="courseApi">
            <template v-slot="{ item }">
                <div class="box p-2">
                    <div class="">
                        <AppImg :src="item.cover" style="border-radius: 5px;"></AppImg>
                    </div>

                    <h5 class="text-lg fw-bold mb-2 mt-4 chover">
                        <router-link :to="'/admin/custom-detail?id=' + item.id">
                            {{ item.title }}
                        </router-link>
                    </h5>
                    <p class="text-sm">{{ item.intro }}</p>
                    <div class="flex justify-between items-center mt-2 mb-4">
                        <div>
                            <!-- {{ item }} -->
                        </div>
                        <button class="btn-enter" @click="$router.push('/course-detail?id=' + item.id)">进入课程</button>
                    </div>

                </div>
            </template>
        </AppPageContent>

        <AppDialogForm title="添加课程" ref="refDialog" @save="addCourseToClass">
            <div class="flex items-center">
                <input v-model="course.name" type="text" placeholder="请输入课程名称" class="form-control mr-4"
                    style="width:300px;">
                <button type="button" class="btn-primary" @click="findCourse">搜索</button>
            </div>

            <table class="table table-nowrap mb-0">
                <thead>
                    <tr>
                        <th>课程名称</th>
                        <th>介绍</th>
                        <th>建议年龄</th>
                        <th class="text-center">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            课程1
                        </td>
                        <td>课程1的介绍</td>
                        <td>3-4</td>
                        <td class="text-center">
                            <span>添加</span> &nbsp;
                            <span>已存在</span>&nbsp;
                        </td>
                    </tr>
                </tbody>
            </table>
        </AppDialogForm>
    </div>
</template>
<script setup>
import courseApi from '@/api/courseApi'
import bus from '@/utils/bus'
const refDialog = ref(null)
const openDialog = () => {
    refDialog.value.open()
}

// 启用监听
bus.on('open-course', openDialog);

// 在组件卸载之前移除监听
onBeforeUnmount(() => {
    bus.off('open-course', openDialog);
})
const course = reactive({
    name: '张',
    curList: [], // 属于本班的课程
    list: [],
    selected: []
})

const addCourseToClass = async () => {
    const ids = [];
    course.selected.forEach((item, idx) => {
        if (item) {
            ids.push(course.list[idx].id)
        }
    })
    ids.forEach(async (id) => {
        const data = await courseApi.put(id, { classID: Number(route.query.id) })
    })

    refDialog.value.close()
    search()
}
const findCourse = async () => {
    const data = await courseApi.getList({ keyword: course.stuName })
    course.list = data.list
    course.selected = data.list.map(item => false)
}

const search = async () => {
    const id = route.query.id
    if (!id) {
        alert('参数错误,请选择具体的班级')

        return;
    }
    // 本班的学生
    const res = await studentApi.getList({ classID: id })
    student.curList = res.list
}
</script>